<template>
  <div id="vmcentertop">
    <div class="tophd">
      <ul>
        <li>{{ centerTop.confirm }}</li>
        <li>{{ centerTop.nowConfirm }}</li>
        <li>{{ centerTop.heal }}</li>
        <li>{{ centerTop.dead }}</li>
      </ul>
    </div>
    <div class="topbd">
      <ul>
        <li>累计确诊</li>
        <li>现存确诊</li>
        <li>累计治愈</li>
        <li>累计死亡</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import $ from 'jquery'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter
const route = useRoute
const store = useStore
const centerTop = reactive({
  arr: [],
  confirm: '',
  nowConfirm: '',
  heal: '',
  dead: ''
})
onMounted(() => {
  // 封装jquery ajax请求
  if (centerTop.arr.length == 0) {
    $.ajax({
      url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign',
      dataType: 'jsonp',
      success: function (res) {
        //    console.log(JSON.parse(res.data));
        centerTop.arr = JSON.parse(res.data)
        console.log(centerTop.arr)
        centerTop.confirm = centerTop.arr.globalStatis.confirm

        centerTop.nowConfirm = centerTop.arr.globalStatis.nowConfirm
        centerTop.heal = centerTop.arr.globalStatis.heal
        centerTop.dead = centerTop.arr.globalStatis.dead
      }
    })
  }
})
</script>
<style scoped>
@font-face {
  font-family: electronicFont;
  src: url(../../assets/font/DS-DIGIT.TTF);
}
#vmcentertop {
  background-color: rgba(101, 132, 226, 0.1);
  padding: 15px;
}
.tophd {
  position: relative;
  border: 1px solid rgba(25, 186, 139, 0.17);
}
.tophd:before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 30px;
  height: 60px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.tophd:after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: '';
  width: 30px;
  height: 60px;
  border-right: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
}

.tophd ul {
  display: flex;
}
.tophd li {
  position: relative;
  flex: 1;
  height: 80px;
  font-size: 35px;
  line-height: 80px;
  color: #ffeb7b;
  text-align: center;
  /* 数字美化 */
  font-weight: bold;
  letter-spacing: 2px;
  font-family: electronicFont;
}
.tophd lI:after {
  content: '';
  position: absolute;
  top: 25%;
  right: 0;
  height: 50%;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.2);
}

.topbd ul {
  display: flex;
}
.topbd ul li {
  flex: 1;
  height: 40px;
  font-size: 18px;
  padding-top: 10px;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}
</style>
